<!--
 描述: 新冠疫情舆情分析可视化平台
 作者: Shen Yuhan
 日期: 2022-04-13
-->

<template>
  <div class="home-container">
    <div class="wrap" ref="editor">
      <header>
        <div class="weather">
          <img :src="imgSrc">
          <span>{{ weatherData.tem }}°C</span>
          <span>{{ weatherData.wea }}</span>
        </div>
        <h2>新冠疫情舆情分析可视化平台</h2>
        <div class="showTime">
          <span class="time">{{ nowTime }}</span>
          <span class="time">{{ week }}</span>
          <span class="time">{{ date }}</span>
        </div>
      </header>
      <sinan/>
      <seamless/>
      <pyramid/>

      <scrollArc/>
      <szBar/>

      <ringPin/>
      <rotateColorful/>
      <circleRunway/>
      <scanRadius/>

      <cakeLinkage/>
      <pyramidTrend/>
      <dynamicLine/>

      <staffMix/>
      <flashCloud/>
      <ringPie/>
      <colorfulRadar/>

      <dynamicList/>
      <bar3d/>
      <colorfulArea/>

      <rainbow/>
      <gauge/>
      <waterPolo/>
      <circleNesting/>

<!--      <div class="divider"></div>-->

    </div>

  </div>
</template>

<script>
import {screenSize} from '@/assets/js/utils'
import home from "@/api/home"

export default {
  name: 'Home',
  components: {},
  data() {
    return {
      nowTime: '',
      week: '',
      date: '',
      imgSrc: '',
      weatherData: {},
    }
  },
  computed: {},
  created() {
    // this.Test()
  },
  mounted() {
    screenSize(this.$refs.editor);
    console.log(this.$refs.editor);
    this.nowTimes();
    // this.getWeather();
  },
  methods: {
    timeFormat(timeStamp) { //时间格式化
      let newDate = new Date(timeStamp);
      let year = newDate.getFullYear();
      let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
      let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
      let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours();
      let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();
      let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds();
      let week = newDate.getDay();
      let weeks = ['日', '一', '二', '三', '四', '五', '六'];
      this.week = '星期' + weeks[week];
      this.date = year + '年' + month + '月' + date + '日';
      this.nowTime = hh + ':' + mm + ':' + ss;
    },
    nowTimes() { //显示当前时间
      this.timeFormat(new Date());
      setInterval(this.nowTimes, 1000);
    },
    getWeather() { // 第三方天气api接口
      home.getWeather().get('https://yiketianqi.com/free/day', {
        params: {
          appid: '67312328',
          appsecret: '4LI6rtwG',
          unescape: '1'
        }
      }).then(res => {
        console.log(res)
        if (res.data) {
          if (res.data.wea_img === 'xue') {
            this.imgSrc = require('../assets/img/brand/xue.png');
          } else if (res.data.wea_img === 'yin') {
            this.imgSrc = require('../assets/img/brand/yin.png');
          } else if (res.data.wea_img === 'yu' || res.data.wea_img === 'bingbao') {
            this.imgSrc = require('../assets/img/brand/yu.png');
          } else if (res.data.wea_img === 'yun') {
            this.imgSrc = require('../assets/img/brand/yun.png');
          } else if (res.data.wea_img === 'wu') {
            this.imgSrc = require('../assets/img/brand/wu.png');
          } else if (res.data.wea_img === 'shachen') {
            this.imgSrc = require('../assets/img/brand/shachen.png');
          } else if (res.data.wea_img === 'lei') {
            this.imgSrc = require('../assets/img/brand/lei.png');
          } else {
            this.imgSrc = require('../assets/img/brand/qing.png');
          }
          this.weatherData = res.data;
        }
      }).catch(err => {
        console.log(err)
      })
    },
    Test() {
      home.getTest().then(res => {
            console.log(res.data)
          })
          .catch(err => {
            console.log(err)
          })
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  .wrap {
    transform-origin: 0px 0px 0px;
    background: url(../assets/img/bj.jpg) no-repeat;
    background-size: contain;
    background-position: 50% 0;
    background-color: rgb(0, 0, 0);
    min-width: auto;
    width: 1920px;
    min-height: auto;
    height: 1080px;
    overflow: auto;

    header {
      position: relative;
      height: 80px;
      background: url(../assets/img/brand/head_bg.png) no-repeat top center;
      background-size: 100% 100%;

      h2 {
        color: #7ef0ff;
        font-size: 2.5rem;
        text-align: center;
        line-height: 4rem;
        letter-spacing: 10px;
      }

      .weather {
        position: absolute;
        left: 1.375rem;
        top: 0.35rem;
        font-size: 0.25rem;
        color: rgba(126, 240, 255, .7);

        img {
          width: .45rem;
        }

        span {
          display: inline-block;
          margin: 0.1rem 0.2rem;

        }

        .tem {
          margin: 0.1rem 0.2rem;
        }
      }

      .showTime {
        position: absolute;
        right: 1.5rem;
        top: 2rem;
        color: rgba(126, 240, 255, .7);
        display: flex;

        .time {
          font-size: 1.25rem;
          margin-right: 2rem;
        }
      }
    }

    //.top {
    //  position: absolute;
    //  left: 0;
    //  top: 0;
    //  width: 100%;
    //  height: 80px;
    //  background-color: transparent;
    //  //background: url(../assets/img/top_nav.png) no-repeat;
    //  background-position: 65% 0;
    //  border: none;
    //  overflow: hidden;
    //}

    //.divider {
    //  position: absolute;
    //  left: 50px;
    //  top: 3253px;
    //  width: 90%;
    //  height: 50px;
    //  width: 300px;
    //  border: none;
    //  background: transparent;
    //}

  }
}
</style>
